<template>
  <div id="Scoreline">
    <div
      class="my-tab curr"
      style="display: flex; align-items: center"
      :class="isXiDingShow && activeType == 2 ? 'xidingTab' : ''"
    >
      <div
        style="margin: 10px 30px 10px 0"
        class="tab-item"
        :class="{ active: activeType == 1 }"
        @click="handleTabItem('1')"
      >
        院校分数线
      </div>
      <div
        @click="handleTabItem('2')"
        :class="{ active: activeType == 2 }"
        class="tab-item"
      >
        专业分数线
      </div>
    </div>
    <!-- 院校分数线 -->
    <div class="table-contaier" v-show="activeType == '1'">
      <div v-if="yearlineData?.length">
        <div v-for="(item, index) in yearlineData" :key="index">
          <div class="page-content-list">
            <div style="" id="my-table">
              <div
                class="my-select"
                :class="isXiDingShow && activeType == 2 ? 'xidingselect' : ''"
              >
                <!-- 省份 -->
                <el-select
                  :popper-options="{
                    modifiers: [
                      { name: 'computeStyles', options: { adaptive: false } },
                    ],
                  }"
                  v-show="index == 0"
                  no-data-text="暂无数据"
                  @change="provinceChange"
                  v-model="filterData.selecttextDX6"
                  placeholder=" "
                  style="width: 90px; margin: 0 10px"
                >
                  <el-option
                    v-for="item in filterData.popArrDX6"
                    :key="item.provinceCode"
                    :label="item.provinceName"
                    :value="item.provinceCode"
                  />
                </el-select>
                <!-- 专业 -->
                <el-select
                  :popper-options="{
                    modifiers: [
                      { name: 'computeStyles', options: { adaptive: false } },
                    ],
                  }"
                  no-data-text="暂无数据"
                  v-model="lineSelecttextDX5[index]"
                  placeholder=" "
                  style="width: 90px"
                >
                  <el-option
                    v-for="item in linePopArrDX5[index]"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </div>
              <div style="background: #fff">
                <!-- style="top: 164px; width: 1160px" -->
                <table
                  class="my-table head"
                  :class="isXiDingShow && activeType == 2 ? 'xidingtable' : ''"
                >
                  <thead class="my-table-head">
                    <th width="80">年份</th>
                    <th class="text-left pl20">院校(招生方向)</th>
                    <!---->
                    <th width="80">批次/段</th>
                    <!---->
                    <!-- <th width="100">选考要求</th> -->
                    <th width="80">录取数</th>
                    <th width="80">最高分</th>
                    <th width="80">最低分</th>
                    <th width="80">平均分</th>
                    <th width="80">最低位次</th>
                  </thead>
                </table>
              </div>
            </div>

            <div v-if="yearlineData.length">
              <table
                v-show="item2.name == lineSelecttextDX5[index]"
                class="my-table body"
                v-for="(item2, index2) in item.courses"
                :key="index2"
              >
                <tbody class="my-table-body">
                  <tr v-for="(item3, index2) in item2.fractions" :key="index2">
                    <td width="80" class="text-center">
                      <span class="cntext">{{ item3.year || '-' }}</span>
                    </td>
                    <td class="pt20 pb20 pl20">
                      <span class="cntext f14">{{
                        item3.collegeNameText || '-'
                      }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{ item3.batch || '-' }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{
                        item3.enterNum || item3.uEnterNum || '-'
                      }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{
                        item3.maxScore || item3.uMaxScore || '-'
                      }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{
                        item3.minScore || item3.uMinScore || '-'
                      }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{
                        item3.avgScore || item3.uAvgScore || '-'
                      }}</span>
                    </td>
                    <td width="80" class="text-center">
                      <span class="cntext">{{
                        item3.minRank || item3.uMinRank || '-'
                      }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div v-else style="text-align: center; margin-top: 20px">
              暂无数据
            </div>
          </div>
        </div>
        <div id="tipsCard" class="main">
          <div class="card-title" style="display: flex; font-size: 14px">
            <div style="margin: 0 5px; color: red">
              <el-icon size="16">
                <WarningFilled />
              </el-icon>
            </div>
            <div>重要提示：</div>
          </div>
          <div
            class="dataDescription"
            v-html="pclDescription"
            style="white-space: pre-wrap"
          ></div>
        </div>
      </div>

      <div
        v-else
        style="
          text-align: center;
          margin-top: 20px;
          color: rgba(144, 147, 153, 0.88);
        "
      >
        暂无数据
      </div>
    </div>

    <!-- 专业分数线 -->
    <!-- <div v-show="activeType == '2'"></div> -->
    <!-- v-loading="majorLineLoading" -->
    <div v-show="activeType == '2'">
      <div class="select-box" :class="isXiDingShow ? 'xidingselect' : ''">
        <!-- 省份 -->
        <el-select
          no-data-text="暂无数据"
          placeholder=" "
          v-model="filterData.selecttextDX6"
          @change="provinceChange2"
          style="width: 90px; margin: 0 10px"
        >
          <el-option
            v-for="item in filterData.popArrDX6"
            :key="item.provinceCode"
            :label="item.provinceName"
            :value="item.provinceCode"
          />
        </el-select>
        <!-- 年份 -->
        <el-select
          no-data-text="暂无数据"
          placeholder=" "
          v-model="popArrDXData.selecttextDX6"
          @change="
            yearChange(filterData.selecttextDX6, popArrDXData.selecttextDX6)
          "
          style="width: 90px"
        >
          <el-option
            v-for="item in popArrDXData.popArrDX6"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <!-- 专业 -->
        <el-select
          no-data-text="暂无数据"
          @change="subjectChange"
          v-model="popArrDXData.selecttextDX7"
          placeholder=" "
          style="width: 90px; margin: 0 10px"
        >
          <el-option
            v-for="item in popArrDXData.popArrDX7"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <!-- 学历 -->
        <el-select
          no-data-text="暂无数据"
          v-model="popArrDXData.selecttextDX8"
          placeholder=" "
          @change="levelChange"
          style="width: 90px"
        >
          <el-option
            v-for="item in popArrDXData.popArrDX8"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="page-content-list">
        <div class="mb20">
          <!-- style="
              height: 36px;
              position: sticky;
              top: 146px;
              left: 0;
              background: #fff;
            " -->
          <div
            :class="isXiDingShow && activeType == 2 ? 'xidingtable-title' : ''"
          >
            <!-- style="top: 164px; width: 1160px" -->
            <table class="my-table head">
              <thead class="my-table-head">
                <th width="80">年份</th>
                <th class="text-left pl20">专业名称</th>
                <!---->
                <th width="80">选科</th>
                <th width="80">录取数</th>
                <!---->
                <!-- <th width="100">选考要求</th> -->
                <th width="80">最高分</th>
                <th width="80">最低分</th>
                <th width="80">平均分</th>
                <th width="80">最低位次</th>
              </thead>
            </table>
          </div>
          <table class="my-table body">
            <tbody class="my-table-body">
              <tr
                v-for="(item, index) in planList"
                :key="index"
                :style="
                  item.dataType === 'c'
                    ? { height: '100px', background: '#f0f0f0' }
                    : {}
                "
              >
                <td width="80" class="text-center">
                  <span class="cntext">{{ item.year || '-' }}</span>
                </td>
                <td class="pt20 pb20 pl20">
                  <div v-if="item.dataType == 'c'">
                    <div class="f16">
                      <span style="margin-right: 10px">{{
                        item.collegeCode
                      }}</span
                      ><span>{{ item.collegeName }}</span>
                    </div>
                    <div>
                      {{ item.collegeNameText }}(专业数{{ item.professionNum }})
                    </div>
                  </div>
                  <span v-else class="cntext f14"
                    >{{ item.professionName || '-' }}{{ item.remark }}</span
                  >
                </td>
                <td width="80" class="text-center">
                  <span class="cntext">{{
                    item.chooseSubjectText || '不限'
                  }}</span>
                </td>
                <td width="80" class="text-center">
                  <span class="cntext">{{
                    item.enterNum || item.uEnterNum || '-'
                  }}</span>
                </td>
                <td width="80" class="text-center">
                  <span class="cntext">{{
                    item.maxScore || item.uMaxScore || '-'
                  }}</span>
                </td>
                <td width="80" class="text-center">
                  <div class="row center alitem">
                    <span class="cntext">{{
                      item.minScore || item.uMinScore || '-'
                    }}</span>
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.uZjTextExplain"
                      placement="top"
                    >
                      <div
                        v-if="
                          ((item.zjText * 1 > 0 && item.minScore * 1 > 0) ||
                            (item.zjText == '有征集' && item.minScore != 0)) &&
                          item.minScore !== '-'
                        "
                        style="background-color: #fbc7c2; color: red"
                      >
                        征
                      </div>
                    </el-tooltip>
                  </div>
                </td>
                <td width="80" class="text-center">
                  <span class="cntext">{{
                    item.avgScore || item.uAvgScore || '-'
                  }}</span>
                </td>
                <td width="80" class="text-center">
                  <span class="cntext">{{
                    item.minRank || item.uMinRank || '-'
                  }}</span>
                </td>
              </tr>
            </tbody>
          </table>

          <div
            v-if="planList.length <= 0"
            style="text-align: center; color: #909399e0; margin-top: 50px"
            class="f14"
          >
            暂无数据
          </div>
        </div>
      </div>
      <div id="tipsCard" class="main">
        <div class="card-title" style="display: flex; font-size: 14px">
          <div style="margin: 0 5px; color: red">
            <el-icon size="16">
              <WarningFilled />
            </el-icon>
          </div>
          <div>重要提示：</div>
        </div>

        <div
          class="dataDescription"
          v-html="pclDescription"
          style="white-space: pre-wrap"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getNoteDesc } from '@/api/appv2/appv2';
const props = defineProps({
  yearlineData: {
    type: Array,
    default: () => [],
  },
  linePopArrDX5: {
    type: Array,
    default: () => [],
  },
  lineSelecttextDX5: {
    type: Array,
    default: () => [],
  },
  planList: {
    type: Array,
    default: () => [],
  },
  popArrDXData: {
    type: Object,
    default: () => {},
  },
  popArrDX6: {
    type: Array,
    default: () => [],
  },
  filterData: {
    type: Object,
    default: () => {},
  },
  isXiDingShow: {
    type: Boolean,
    default: () => false,
  },
});
watch(() => props.isXiDingShow);

const pclDescription = ref('');
const fetchNoteDesc = () => {
  getNoteDesc({ type: 'collegeScoreLineDescription' }).then((res) => {
    pclDescription.value = res.data.collegeScoreLineDescription;
  });
};
fetchNoteDesc();

const emits = defineEmits([
  'handleUpdateMajorLineYear',
  'handleUpdateMajorLineSubject',
  'handleUpdateMajorLineLevel',
  'handleUpdateAllList',
]);
const activeType = ref('1');
const provinceChange = (val) => {
  emits('handleUpdateAllList', val);
};
const yearChange = (province, val) => {
  emits('handleUpdateMajorLineYear', province, val);
};
const provinceChange2 = (val) => {
  emits('handleUpdateMajorLineProvince', val);
};
const subjectChange = (val) => {
  emits('handleUpdateMajorLineSubject', val);
};
const levelChange = (val) => {
  emits('handleUpdateMajorLineLevel', val);
};
const handleTabItem = (type) => {
  activeType.value = type;
};
</script>

<style lang="scss" scoped>
.xidingTab {
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: 120px;
  z-index: 999;
}

.xidingselect {
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: 160px;
  z-index: 999;
}

.xidingtable-title {
  margin-top: 120px;
}

.my-table {
  width: 100%;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  border-collapse: collapse;
  border-spacing: 0;
}

.my-table-head {
  border-left: 1px solid #e8e8e8;
  width: 100%;
}

.my-table .my-table-head th {
  border-bottom: 1px solid #e8e8e8;
  padding: 9px 0;
  font-size: 12px;
  color: #86909c;
}

.my-table .my-table-body td {
  font-size: 12px !important;
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
}

.text-left {
  text-align: left !important;
}

.my-select {
  // position: sticky;
  // top: 85px;
  // left: 0;
  background: #fff;
  padding: 20px 0;
}

.body {
  border-top: none;
}

.select-box {
  // position: sticky;
  // top: 99px;
  // left: 0;
  // background: #fff;
  padding: 20px 0;
}

.active {
  color: #409eff;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}

#tipsCard {
  margin: 20px 0;
  padding: 0 10px;
  border: 1px dashed red;
  background: #fff9f9;
  border-radius: 3px;

  .card-title {
    margin-top: 8px;
  }

  .tips-contaier {
    margin-bottom: 10px;
  }
}
</style>
